<template>
	<div id="app">
		<section id="main-app">
			<section class="menu-wrapper">
				<a-menu mode="inline" theme="dark" :selectedKeys="[selectKey]">
					<a-menu-item
						v-for="item in menus"
						:key="item.key"
						@click="changeMenu(item)"
					>
						<router-link :to="{ path: item.path }">
							<a-icon v-if="item.icon" :type="item.icon" />
							<span class="menu-title">{{ item.title }}</span>
						</router-link>
					</a-menu-item>
				</a-menu>
			</section>
			<section class="frame-wrapper">
        <a-button @click="printRoute">打印$route</a-button>
				<router-view v-show="$route.name" />

        <section v-show="!$route.name" id="frame">
          子应用
        </section>
			</section>
		</section>
	</div>
</template>

<script>
export default {
	name: "App",
	data() {
		return {
			selectKey: "Home", // 默认选中主页
			menus: [
				{
					key: "Home",
					title: "主页",
					path: "/",
					icon: "home",
				},
			],
		};
	},
	methods: {
		changeMenu(item) {
			this.selectKey = item.key;
			// 可以在这里添加其他菜单切换逻辑
		},
    printRoute() {
      console.log(this.$route);
    }
	},
	mounted() {
		// 初始化时根据当前路由设置选中的菜单
		const currentPath = this.$route.path;
		const currentMenu = this.menus.find((menu) => menu.path === currentPath);
		if (currentMenu) {
			this.selectKey = currentMenu.key;
		}
	},
};
</script>

<style lang="scss">
#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#main-app {
  display: flex;
  height: 100%;
  width: 100%;
}

.menu-wrapper {
  width: 250px;
  height: 100%;
  background-color: #001529;
  overflow-y: auto;
  .menu-title {
    color: #fff
  }
}

.frame-wrapper {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

/* 确保菜单样式正确 */
.ant-menu-dark {
  background-color: #001529 !important;
  height: 100%;
}

.ant-menu-item {
  width: 100% !important;
}

/* 链接样式 */
.router-link-exact-active {
  color: #1890ff !important;
}
</style>
